<template>
  <div>
    <a-form :form="form">
      <a-form-item label="企业名称" v-bind="formItemLayout">
        <a-input
          v-decorator="['companyName',
                   {rules: [
                    { required: true, message: '企业名称不能为空'},
                    { max: 20, message: '长度不能超过20个字符'}
                  ]}]"
          :disabled="isdisable"
        />
      </a-form-item>
      <a-form-item label="统一信用码" v-bind="formItemLayout">
        <a-input
          v-decorator="['unifiedCreditCode',
                   {rules: [
                    { max: 100, message: '长度不能超过100个字符'}
                  ]}]"
          :disabled="isdisable"
        />
      </a-form-item>
      <a-form-item label="地址" v-bind="formItemLayout">
        <a-input
          v-decorator="['companyAddr',
                   {rules: [
                    { max: 100, message: '长度不能超过100个字符'}
                  ]}]"
          :disabled="isdisable"
        />
      </a-form-item>
      <a-form-item label="企业性质" v-bind="formItemLayout">
        <a-select
          v-decorator="['companyNature',
          {rules: [{ required: true, message: '请企业性质' }]}]"
          :disabled="isdisable"
        >
          <a-select-option value="1">国家行政企业</a-select-option>
          <a-select-option value="2">公私合作企业</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="法人代表名字" v-bind="formItemLayout" style="width: 100%">
        <a-input
          v-decorator="['companyLegalPerson',
                  {rules: [
                    { required: true, message: '法人代表名字不能为空'},
                    { max: 100, message: '长度不能超过100个字符'}
                  ]}]"
          :disabled="isdisable"
        />
      </a-form-item>
      <a-form-item label="电话号码" v-bind="formItemLayout">
        <a-input
          v-decorator="['companyTe', {rules: [
            { pattern: '^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$', message: '请输入正确的手机号'}
          ]}]"
          :disabled="isdisable"
        />
      </a-form-item>
      <a-form-item label="传真号码" v-bind="formItemLayout">
        <a-input v-decorator="['companyFax', {rules: []}]" :disabled="isdisable" />
      </a-form-item>
      <a-form-item label="电邮" v-bind="formItemLayout">
        <a-input
          v-decorator="['companyEmail',{rules: [
            { type: 'email', message: '请输入正确的邮箱' },
            { max: 50, message: '长度不能超过50个字符'}
          ]}]"
          :disabled="isdisable"
        />
      </a-form-item>
      <a-form-item label="生产许可编码" v-bind="formItemLayout">
        <a-input
          v-decorator="['companyLicense',
                   {rules: [
                    { max: 100, message: '长度不能超过100个字符'}
                  ]}]"
          :disabled="isdisable"
        />
      </a-form-item>
      <a-form-item label="企业人数" v-bind="formItemLayout">
        <a-input-number v-decorator="['companyPeople']" style="width: 100%" :disabled="isdisable" />
      </a-form-item>

      <a-form-item label="企业简介" v-bind="formItemLayout">
        <a-textarea
          :rows="4"
          v-decorator="[
          'companyMemo',
          {rules: [
            { max: 50, message: '长度不能超过50个字符'}
          ]}]"
          :disabled="isdisable"
        ></a-textarea>
      </a-form-item>
      <a-form-item label="企业类别" v-bind="formItemLayout">
        <a-select
          v-decorator="['companyType',
          {rules: [{ required: true, message: '请企业性质' }]}]"
          :disabled="isdisable"
        >
          <a-select-option value="1">有限责任公司</a-select-option>
          <a-select-option value="2">股份有限公司</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="所属区域" v-bind="formItemLayout">
        <a-select
          showSearch
          placeholder="请选择所属区域"
          optionFilterProp="children"
          style="width: 200px"
          :filterOption="filterOption"
          v-decorator="['zoneId',{rules: [{ required: true, message: '请选择所属区域' }]}]"
          :disabled="isdisable"
        >
          <a-select-option v-for="z in zoneData" :key="z.zoneId">{{z.zoneName}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="所属安监局" v-bind="formItemLayout">
        <a-select
          showSearch
          placeholder="请选择所属安监局"
          optionFilterProp="children"
          style="width: 200px"
          :filterOption="filterOption"
          v-decorator="['officeId',{rules: [{ required: true, message: '请选择所属安监局' }]}] "
          :disabled="isdisable"
        >
          <a-select-option v-for="o in officeData" :key="o.officeId">{{o.officeName}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="经度" v-bind="formItemLayout">
        <a-input-number v-decorator="['companyLon']" style="width: 100%" :disabled="isdisable" />
      </a-form-item>
      <a-form-item label="维度" v-bind="formItemLayout">
        <a-input-number v-decorator="['companyLat']" style="width: 100%" :disabled="isdisable" />
      </a-form-item>
    </a-form>
    <div v-if="!curruser.officeId">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </div>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 20 },
  wrapperCol: { span: 30 }
};
export default {
  name: "CompanyInfo",
  data() {
    return {
      formItemLayout,
      form: this.$form.createForm(this),
      company: {},
      companyId: "",
      loading: false,
      zoneData: [],
      officeData: [],
      isdisable: false,
      curruser: {}
    };
  },
  computed: {},
  methods: {
    onClose() {
      this.loading = false;
    },
    setFormValues({ ...company }) {
      this.companyId = company.companyId;
      let fields = [
        "companyName",
        "unifiedCreditCode",
        "companyAddr",
        "companyNature",
        "companyLegalPerson",
        "companyTe",
        "companyFax",
        "companyEmail",
        "companyLicense",
        "companyMemo",
        "companyPeople",
        "companyType",
        "zoneId",
        "officeId",
        "companyLon",
        "companyLat",
        "zoneId",
        "officeId"
      ];
      Object.keys(company).forEach(key => {
        if (fields.indexOf(key) !== -1) {
          this.form.getFieldDecorator(key);
          let obj = {};
          obj[key] = company[key];
          this.form.setFieldsValue(obj);
        }
      });
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true;
          let company = this.form.getFieldsValue();
          company.companyId = this.companyId;
          this.$put("company", {
            ...company
          })
            .then(r => {
              this.loading = false;
              this.$emit("success");
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    }
  },
  mounted()  {
      let that = this
      let user = this.$db.get("USER");
      that.curruser = user 
      let companyId = this.$db.get("COMPANY");
      this.isdisable = user.officeId == undefined ? false : true;
      this.$get("company/getCompany/"+companyId.value).then(r =>{
          that.company = r.data.company
          that.setFormValues(that.company)
      })
        this.$get("zone/select").then(r => {
          this.zoneData = r.data.rows;
        });
        this.$get("office").then(r => {
          this.officeData = r.data.rows;
        });
      
    
  }
};
</script>
